<template>
  <el-card>
    <el-table :data="list" border>
      <el-table-column
        label="序号"
        type="index"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片" width="150" align="center">
        <template v-slot="{ row }">
          <el-image :src="row.skuDefaultImg" style="width: 75px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template v-slot="{ row }">
          <el-button
            v-if="row.isSale == 0 ? true : false"
            size="small"
            type="info"
            :icon="Top"
            @click="topShelf(row.id)"
            title="上架"
          ></el-button>
          <el-button
            v-else
            size="small"
            type="success"
            :icon="Bottom"
            @click="bottomShelf(row.id)"
            title="下架"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            :icon="Edit"
            title="修改SKU"
          ></el-button>
          <el-button
            size="small"
            type="info"
            :icon="InfoFilled"
            title="查看SKU详情"
            @click="showDetail(row.id)"
          ></el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon-color="#626AEF"
            :title="`确定要删除${row.skuName}吗?`"
            @confirm="confirmEvent(row)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button
                size="small"
                type="danger"
                :icon="Delete"
                title="删除SKU"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :page-sizes="[10, 20, 30]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getList"
      @size-change="getList"
    />
  </el-card>
  <!-- 详情的抽屉组件 -->
  <el-drawer v-model="isDrawer" :with-header="false" size="50%">
    <br />
    <el-row :gutter="30">
      <el-col class="col_text_right" :span="7" style="padding-left: 100px">
        <span class="span_max"> 名称</span>
      </el-col>
      <el-col class="col_text_left" :span="7">
        <span> {{ skuDetail.skuName }}</span></el-col
      >
      <el-col class="col_text_left" :span="7">
        <span class="span_max"> </span
      ></el-col> </el-row
    ><br />
    <el-row :gutter="30">
      <el-col class="col_text_right" :span="7" style="padding-left: 100px">
        <span class="span_max"> 描述</span>
      </el-col>
      <el-col class="col_text_left" :span="7">
        <span> {{ skuDetail.skuDesc }}</span></el-col
      >
      <el-col class="col_text_left" :span="7">
        <span class="span_max"> </span
      ></el-col> </el-row
    ><br />
    <el-row :gutter="30">
      <el-col class="col_text_right" :span="7" style="padding-left: 100px">
        <span class="span_max"> 价格</span>
      </el-col>
      <el-col class="col_text_left" :span="7">
        <span class="span_max"> {{ skuDetail.price }}</span></el-col
      >
      <el-col class="col_text_left" :span="7">
        <span class="span_max"> </span
      ></el-col> </el-row
    ><br />
    <el-row :gutter="30">
      <el-col class="col_text_right" :span="7" style="padding-left: 100px">
        <span class="span_max"> 平台属性</span>
      </el-col>
      <el-col class="col_text_left" :span="7"
        ><el-tag
          v-for="attrvlue in skuDetail.skuAttrValueList"
          :key="attrvlue.id"
          >{{ attrvlue.attrName }}
        </el-tag></el-col
      >
      <el-col class="col_text_left" :span="7"> <span></span></el-col> </el-row
    ><br />
    <el-row :gutter="30">
      <el-col class="col_text_right" :span="7" style="padding-left: 100px">
        <span class="span_max"> 销售属性</span>
      </el-col>
      <el-col class="col_text_left" :span="7">
        <el-tag
          v-for="saleAttrvlue in skuDetail.skuSaleAttrValueList"
          :key="saleAttrvlue.id"
          >{{ saleAttrvlue.saleAttrValueName }}
        </el-tag></el-col
      >
      <el-col class="col_text_left" :span="7">
        <span class="span_max"> </span
      ></el-col> </el-row
    ><br />
    <el-row :gutter="30">
      <el-col class="col_text_right" :span="7" style="padding-left: 100px">
        <span class="span_max"> 商品图片</span>
      </el-col>
      <el-col class="col_text_left" :span="13">
        <div class="block text-center" style="margin-top: 30px">
          <el-carousel height="450px">
            <el-carousel-item
              v-for="skuimgs in skuDetail.skuImageList"
              :key="skuimgs.id"
            >
              <el-image :src="skuimgs.imgUrl" />
            </el-carousel-item>
          </el-carousel></div
      ></el-col>
      <el-col class="col_text_left" :span="7">
        <span class="span_max"> </span
      ></el-col> </el-row
    ><br />
  </el-drawer>
</template>

<script lang="ts">
export default {
  name: 'Sku',
};
</script>

<script lang="ts" setup>
import {
  Plus,
  Delete,
  Top,
  InfoFilled,
  Edit,
  Bottom,
} from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue';
import type {
  SkuListModel,
  SkuModel,
  SkuPageListModel,
} from '@/api/product/model/skuModel';
import {
  cancelSaleApi,
  deleteSkuApi,
  getSkuInfoApi,
  getSkuListApi,
  onSaleApi,
} from '@/api/product/sku';
import { ElMessage } from 'element-plus';

/* 删除Sku */
const deleteSku = (id: number) => {};

// 删除确定和取消的回调
const confirmEvent = async (row: SkuModel) => {
  await deleteSkuApi(row.id as number);
  getList();
  ElMessage.success(`删除${row.skuName}成功!`);
};
const cancelEvent = () => {
  console.log('删除失败!');
};

/* 查看详情 */
const isDrawer = ref(false);

// 定义存储SKU详情信息的数据
const skuDetail = ref<SkuModel>({});

const showDetail = async (skuId: number) => {
  isDrawer.value = true;
  const result = await getSkuInfoApi(skuId);
  skuDetail.value = result;
  console.log(result);
};

/* 上架和下架 */
// 上架
const topShelf = async (id: number) => {
  await onSaleApi(id);
  getList();
};

const bottomShelf = async (id: number) => {
  await cancelSaleApi(id);
  getList();
};

// 定义分页数据
const list = ref<SkuPageListModel>([]);
const total = ref(0);
const page = ref(1);
const limit = ref(10);

// 请求数据
const getList = async () => {
  const result = await getSkuListApi(page.value, limit.value);
  list.value = result.records;
  total.value = result.total;
  console.log(list.value);
};

// 初始化请求数据
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.col_text_right {
  text-align: right;
}
.col_text_left {
  text-align: left;
}
.span_max {
  font-size: 22px;
  font-weight: 400;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 350px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: red;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: red;
}
.el-carousel__indicator button {
  button {
    background-color: red;
  }
}
</style>
